<template>
  <div class="sub-box">
    <!--列表-->
    <div class="sub-content">
      <ul class="recommend-box">
        <li v-for="item in dataList">
          <router-link :to="'/sommelierDetail?id='+item.uid">
            <div class="img-box" ref="imgWidth">
              <img :src="sourceUrl+item.imageUrl" alt="">
            </div>
            <div class="name-info">
              <span class="name">{{item.name}}</span>
              <span class="distance-box">距离 <span class="distance-num">{{item.juli}}</span></span>
            </div>
            <div class="summary">
              <span
                class="position">{{item.level == 3 ? '侍酒师' : item.level == 4 ? '银牌代理' : item.level == 5 ? '金牌代理' : '区域总代理'}}</span>
              <span class="gender">{{item.sex == 1 ? '男' : '女'}}</span>
              <span class="age">{{item.age}}岁</span>
            </div>
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import global from '../../public/global.vue'

  export default {
    name: 'SubHistory',
    data() {
      return {
        dataList: [],
        sourceUrl: global.sourceUrl,
      }
    },
    created: function () {
      let self = this;
      let url = global.apiUrl;
      let uid = global.getCookie("uid");
      var p1=window.localStorage.getItem("latlng").split(",");;
      self.$http.get(url + '/sommelier/sommelierHistory?uid=' + uid).then(res => {
        self.dataList = res.data.data;
        for(let i=0;i<res.data.data.length;i++){
          let p2=new Array();
          p2[0]=res.data.data[i].longitude;
          p2[1]=res.data.data[i].latitude;
          let dis = AMap.GeometryUtil.distance(p1, p2);
          if(dis<1000){
            if(dis<5){
              self.dataList[i].juli="贼近";
            }else{
              self.dataList[i].juli=dis.toFixed(1)+"m";
            }

          }else{
            self.dataList[i].juli=(dis/1000).toFixed(2)+"km";
          }
        }

      })
    },
    mounted(){
      setTimeout(()=>{
        console.log(this.$refs.imgWidth);
        let width=this.$refs.imgWidth;
        for(let i=0;i<width.length;i++){
          this.$refs.imgWidth[i].style.height=width[0].clientWidth+'px';
        }
      },100)
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
  @bdradius: 8px;
  .sub-box {
    width: 100%;
    background: #f3f3f3;
    .sub-content {
      padding-bottom: 1px;
      margin-bottom: 10px;
      background: #fff;
      /*推荐*/
      .recommend-box {
        width: 100%;
        padding: 10px 10px 0;
        display: flex;
        flex-wrap: wrap;
        li {
          width: 49%;
          margin-right: 2%;
          border: 1px solid #eee;
          border-radius: @bdradius;
          margin-bottom: 10px;
          .img-box {
            width: 100%;
            img {
              width: 100%;
              height: 100%;
              border-radius: @bdradius;
            }
          }
          .name-info {
            /*height: 30px;*/
            /*line-height: 30px;*/
            padding: 0 2px;
            margin-top: 10px;
            font-size: 0.95rem;
            display: flex;
            justify-content: space-between;
            .name {
              font-weight: bold;
              color: #333;
            }
            .distance-box {
              font-size: 0.8rem;
              color: #D44242;
              margin-top: 2px;
            }
          }
          .summary {
            height: 30px;
            line-height: 30px;
            padding: 0 2px;
            font-size: 0.6rem;
            color: #fff;
            .position, .gender, .age {
              padding: 1px 10px;
              border-radius: 15px;
            }
            .position {
              background: #FB3F40;
            }
            .gender, .age {
              background: #FF6978;
            }
          }
        }
        li:nth-child(even) {
          margin-right: 0;
        }
      }
    }
  }

</style>
